<template>
  <div class="photo">
    <h3 class="photo-title">{{ photoInfo.title }}</h3>
    <p class="subtitle">
      <span>发表时间：{{ photoInfo.add_time | dateFormat }}</span>
      <span>点击：{{ photoInfo.click }}次</span>
    </p>
    <hr />

    <!-- 缩略图 -->
    <vue-preview :slides="slide1"></vue-preview>

    <!-- 文字区域 -->
    <div class="content" v-html="photoInfo.content"></div>

    <!-- 评论 -->
    <comment v-bind:id="id"></comment>
  </div>
</template>

<script>
import comment from "../common/comment.vue";
export default {
  data() {
    return {
      id: this.$route.params.id, // 图片的id
      photoInfo: {}, // 图片详情内容
      slide1: []
    };
  },
  created() {
    this.getPhotoInfo();
    this.getImages();
  },
  methods: {
    //   获取图片详情
    getPhotoInfo() {
      this.$http.get("api/getimageInfo/" + this.id).then(result => {
        if (result.body.status === 0) {
          this.photoInfo = result.body.message[0];
        }
      });
    },
    getImages() {
      this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.body.status === 0) {
          result.body.message.forEach(item => {
            item.w = 400;
            item.h = 400;
            item.msrc = item.src;
          });
          this.slide1 = result.body.message;
        }
      });
    }
  },
  components: {
    comment
  }
};
</script>

<style lang="scss">
.photo {
  padding: 3px;
  .photo-title {
    color: #22aaff;
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
  }
  .subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  img {
    width: 100%;
  }
  figure {
    display: inline-block;
    margin: 3px;
    width: 31.5%;
  }
  .content {
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 22px;
  }
}
</style>